<?php include('../../blocks/header.inc'); ?>

<div class="conteneur_general">
  <div class="bloc_recherche_dark rounded7">
    This is the first tutorial of a serie that will learn you the basics of the creation of an application.<br>
    You can directly view the result of this tutorial by going to the <a href="#">live demo</a>.
  </div>

  <div class="coche_blanc"></div>
  <div class="bloc_contenu rounded7">  
    <h1>Tutorial 2 : <b>Handling multiple views</b></h1>
    <div class="encart">
    
            
      The purpose here is to update our simple blogging application to allow different views on the same object. Please see <a href="tutos1.html" target="_blank">tutorial 1</a> in you didn't do it yet.
      <br>
      Suppose we'd like to have a different application where at first you see a list of posts. Clic on a button "Read it" and you see the detail.<br>


      <h2>1. Create your HTML document</h2>
      First, let's modify our example, the [Step 1] of our first tutorial, which looked like this :
<pre>
&lt;div id="blogContainer" class="load_on_start" dataSource="tuto1_source.html" 
        dataObject="BlogEntry" defaultView="DetailedView" callMethod="iframe"&gt;
  &lt;div class="blog_entry" id="pattern_BlogEntry_DetailedView" style="display:none;"&gt;
    &lt;h2 class="blog_title title"&gt;&lt;/h2&gt;
    &lt;p class="post_date date"&gt;&lt;/p&gt;
    &lt;p class="entry_content content"&gt;&lt;/p&gt;
    &lt;p class="signature"&gt;Published by : &lt;span class="poster"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
      <br><br>
      Now let's add the second view. We'll call it "ListView", and it's going to be our default view. 
      It is the similar to the detailed view, it just doesn't include the "content" part :
<pre>
&lt;div id="blogContainer" class="load_on_start" dataSource="tuto1_source.html" 
        dataObject="BlogEntry" <b>defaultView="ListView"</b> callMethod="iframe"&gt;
  <b>&lt;div class="blog_entry" id="pattern_BlogEntry_ListView" style="display:none;"&gt;</b>
  <b>  &lt;h2 class="blog_title title"&gt;&lt;/h2&gt;</b>
  <b>  &lt;p class="post_date date"&gt;&lt;/p&gt;</b>
  <b>  &lt;p class="signature_list"&gt;Published by : &lt;span class="poster"&gt;&lt;/span&gt;&lt;/p&gt;</b>
  <b>&lt;/div&gt;</b>
  &lt;div class="blog_entry" id="pattern_BlogEntry_DetailedView" style="display:none;"&gt;
    &lt;h2 class="blog_title title"&gt;&lt;/h2&gt;
    &lt;p class="post_date date"&gt;&lt;/p&gt;
    &lt;p class="entry_content content"&gt;&lt;/p&gt;
    &lt;p class="signature"&gt;Published by : &lt;span class="poster"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;     
&lt;/div&gt;
</pre>
      <br><br>

      <h2>2. Add events</h2>
      To be able to switch between views, we add links with events :
<pre>
&lt;div id="blogContainer" class="load_on_start" dataSource="tuto1_source.html"
        dataObject="BlogEntry" defaultView="ListView" callMethod="iframe"&gt;
  &lt;div class="blog_entry" id="pattern_BlogEntry_ListView" style="display:none;"&gt;
    &lt;h2 class="blog_title title"&gt;&lt;/h2&gt;
    &lt;p class="post_date date"&gt;&lt;/p&gt;
    &lt;p class="signature_list"&gt;Published by : &lt;span class="poster"&gt;&lt;/span&gt;&lt;/p&gt;
  <b>&lt;a href="#" onclick="goToGUIView(this,'DetailedView','ListView')"&gt;Read it&lt;/a&gt;</b>
  &lt;/div&gt;
  &lt;div class="blog_entry" id="pattern_BlogEntry_DetailedView" style="display:none;"&gt;
    &lt;h2 class="blog_title title"&gt;&lt;/h2&gt;
    &lt;p class="post_date date"&gt;&lt;/p&gt;
    &lt;p class="entry_content content"&gt;&lt;/p&gt;
    &lt;p class="signature"&gt;Published by : &lt;span class="poster"&gt;&lt;/span&gt;&lt;/p&gt;
  <b>&lt;a href="#" onclick="goToGUIView(this,'ListView')"&gt;Read it&lt;/a&gt;</b>
  &lt;/div&gt;      
&lt;/div&gt;
</pre>
       
       --Explaination on events--
       
      <h2>3. Go ! </h2>
      <a href="tuto2result.html" target="_blank">Let's see the demo.</a>
    
    
      
    </div>
    <div class="separ"></div>
    
    <div class="footer_block">
            &nbsp;            
     </div>
     
     
  </div>   
</div>

<?php include('../../blocks/tutos_right.inc'); ?>

<?php include('../../blocks/footer.inc'); ?>

